<!doctype html>  
<html lang="en">
    
    <head>
        <meta charset="utf-8">
        <meta name="author" content="Thibaut de Broca">
        
        <title>Démo responsive design</title>
        
        <style type="text/css">
			html, body, div {
			  margin: 0;
			  padding: 0;
			}
			
			#menu {
			  background-color: black;
    		  color: white;
			}
            
			#news div {
			  float: left;
            }
			
			#news div:nth-child(even) {
			  background-color: lightblue;
			}
			
			@media (max-width: 320px) {
 			 #news div {
				color: blue;
			    width: 50%;
			  }
			  
			  #menu li {
                display:inline-block
              }
			}
			
			@media (min-width: 320px) {
             #menu {
                width: 100px;
     			float: left;
              }
			  #news {
			    margin-left: 100px;
			  }
            }
			
			@media (min-width: 320px) and (max-width: 480px) {
             #news div {
                color: red;
				width: 33%;
              }
			}
			
			@media (min-width: 480px) and (max-width: 768px) {
             #news div {
                color: green;
				width: 25%;
              }
		   }
			
			@media (min-width: 768px){
             #news div {
                color: violet;
				width: 20%;
			 }
           }
        </style>
    </head>
    
    <body>
        
		<div id="menu">
			<ul><li>Menu1&nbsp;&nbsp;</li>
				<li>Menu2&nbsp;&nbsp;</li>
				<li>Menu3&nbsp;&nbsp;</li></ul>
		</div>
        <div id="news">
            <div> Bloc 1 </div>
            <div> Bloc 2 </div>
            <div> Bloc 3 </div>
            <div> Bloc 4 </div>
            <div> Bloc 5 </div>
            <div> Bloc 6 </div>
            <div> Bloc 7 </div>
            <div> Bloc 8 </div>
            <div> Bloc 9 </div>
            <div> Bloc 10 </div>
        </div>
    </body>
</html>